<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta name="format-detection" content="telephone=no, email=no" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.css">
  <link rel="stylesheet" href="../../node_modules/normalize.css/normalize.css">
  <link rel="stylesheet" href="css/index.css">
</head>
<body>
  <div class="container">
    <!-- 导航栏 -->
    <div id="header" class="row" style="height:60px;background:#000">
      <!-- 栅格化布局 通过制定col-xx-12 来进行媒体查询样式的设定 -->
      <div id="headText" class="col-xs-12 col-sm-4 col-md-3 col-lg-8">
        welcome
      </div>
      <div class="pull-left col-xs-6 col-sm-4 col-md-3 col-lg-2" style="background:#000;height:60px; color:#fff;">
        <div id="headLeft" class="" style="margin-top:16px">
          <button id="left1" class="btn" style="background-color:#000;border:0;">DOOLAR</button>
          <button id="left2" style="background-color:#000;border:0;">
            <span class="caret"></span>
          </button>
        </div>
      </div>
      <div class="pull-right col-xs-6 col-sm-4 col-md-3 col-lg-2" style="background:#000;height:60px; color:#fff;">
        <div id="headRight" class="pull-right" style="margin-top:16px">
          <button id="right1" style="background-color:#000;border:0;">
            <span class="caret"></span>
          </button>
          <button id="right" class="btn" style="background-color:#000;border:0;">DOOLAR</button>
         
        </div>
      </div>
    </div>
    <!-- 轮播图 -->
    <div class="row">
      <div id="box" class="col-lg-12 col-md-12 col-sm-12 col-xs-12"></div>
    </div>
    <!-- 图片一览 -->
    <div id="zhan" class="row">
      <div class="col-xs-4 col-sm-6 col-md-4 col-lg-4" style="margin-top: 20px;">
        <figure style="position:relative">
          <img src="image/abt-1.jpg" alt="" width="100%">
        </figure>
      </div>
      <div class="col-xs-4 col-sm-6 col-md-4 col-lg-4" style="margin-top: 20px;">
        <figure style="position:relative">
          <img src="image/abt-2.jpg" alt="" width="100%">
        </figure>
      </div>
      <div class="col-xs-4 col-sm-12 col-md-4 col-lg-4" style="margin-top: 20px;">
        <figure style="position:relative">
          <img src="image/abt-3.jpg" alt="" width="100%">
        </figure>
      </div>
    </div>
    <div id="anim" class="row">
      <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3" style="margin-top: 20px;">
        <figure id="an1">
          <img src="image/abt-1.jpg" alt="" width="100%">
        </figure>
      </div>
      <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3" style="margin-top: 20px;">
        <figure id="an2">
          <img src="image/abt-2.jpg" alt="" width="100%">
        </figure>
      </div>
      <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3" style="margin-top: 20px;">
        <figure id="an3">
          <img src="image/abt-3.jpg" alt="" width="100%">
        </figure>
      </div>
      <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3" style="margin-top: 20px;">
        <figure id="an4">
          <img src="image/abt-3.jpg" alt="" width="100%">
        </figure>
      </div>
    </div>
    <div style="background:#fff">
      <div>
        <p style="text-align:center;margin:20px auto;">网站所属哈哈哈</p>
      </div>
    </div>
  </div>
</body>
</html>
<script src="../../node_modules/jquery/dist/jquery.js"></script>
<script src="../../node_modules/bootstrap/dist/js/bootstrap.js"></script>
<script src="js/index.js"></script>